<template>
  <div class="app-container">

    <!-- 添加或修改规则引擎_策略对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="80px">
        <el-form-item label="策略名称" prop="ruleName">
          <el-input v-model="ruleForm.ruleName" placeholder="请输入策略名称"/>
        </el-form-item>
        <el-form-item label="策略描述" prop="ruleDescription">
          <el-input v-model="ruleForm.ruleDescription" placeholder="请输入策略描述" type="textarea" maxlength="100"
                    show-word-limit/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="updateRule">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <basic-container>
      <div>
        <span class="title" style="padding-right: 5px"><i class="el-icon-back" @click="goBack"></i></span>
        <span class="title">{{ rule.ruleName }}</span>
        <div style="float: right;">
          <el-button
            type="primary"
            plain
            size="medium"
            @click="openRule"
            v-hasPermi="['engine:rule:add']"
          >编辑
          </el-button>
        </div>
        <div style="margin-top: 10px">
          <label style="padding-right: 5rem">描述</label>
          <span>{{ rule.ruleDescription }}</span>
        </div>
      </div>
    </basic-container>
    <basic-container>
<!--      <span class="middleTitle">策略管理</span>-->
      <!--触发器-->
      <div stle="line-height: 20px;margin-bottom: 4px">触发器（Trigger）
        <span>
          <el-popover placement="top-start" width="200" trigger="hover" content="触发器可为空，消息只要满足触发条件中任意一个即可触发。">
          <i class="el-icon-question" slot="reference"></i>
        </el-popover>
        </span>
      </div>
      <basic-container>
        <Trigger :ruleId="rule.ruleId" :trigger="triggerList" :ruleType="this.rule.ruleType" ref="trigger"></Trigger>
      </basic-container>
      <el-button type="primary" @click="submitForm">保存</el-button>
      <el-button @click="goBack">取 消</el-button>
      <!--@click="cancel"-->
    </basic-container>


  </div>
</template>

<script>
import {getRule, updateRule } from "@/api/smart/trendsDispatch/rule";
import Trigger from "./trigger/trigger";

export default {
  name: "RuleView",
  components: {Trigger},
  dicts: ['engine_rule_status', 'rule_type'],
  data() {
    return {
      // 规则引擎_策略表格数据
      rule: {
        ruleId: '',
        ruleName: '',
        ruleDescription: '',
      },
      //触发器信息
      triggerList: [],
      //执行条件信息
      conditionList: [],
      //执行动作信息
      actionList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 表单参数
      ruleForm: {},
      // 表单校验
      rules: {
        ruleName: [{required: true, message: '策略名称不能为空', trigger: 'blur'}],
        ruleType: [{required: true, message: '策略类型不能为空', trigger: 'blur'}],
      }
    };
  },
  created() {
    this.rule.ruleId = this.$route.query.ruleId;
    this.getRule(this.rule.ruleId);
  },
  methods: {
    /** 查询规则引擎_策略列表 */
    getRule(val) {
      getRule(val).then(response => {
        this.rule = response.data;
        let ruleContent = JSON.parse(this.rule.ruleContent);
        this.triggerList = ruleContent.trigger;
        this.conditionList = ruleContent.condition;
        this.actionList = ruleContent.action;
      });
    },
    /**编辑按钮*/
    openRule() {
      this.reset();
      this.ruleForm = this.rule;
      this.open = true;
      this.title = "修改策略";
    },
    /**编辑窗口确定按钮*/
    updateRule() {
      this.$refs["ruleForm"].validate(valid => {
        if (valid) {
          updateRule(this.ruleForm).then(response => {
            this.$modal.msgSuccess("修改成功");
            this.open = false;
            this.getRule(this.ruleForm.ruleId);
          });
        }
      })
    },
    //编辑窗口取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.ruleForm = {
        ruleId: null,
        ruleName: null,
        ruleDescription: null,
        ruleStatus: null,
      };
      this.resetForm("ruleForm");
    },
    //返回按钮、取消按钮
    goBack() {
      this.$router.go(-1)
    },
    //保存按钮
    submitForm() {
      let content = {}
      let triggerList = this.$refs.trigger.triggerList;
      if (triggerList && triggerList.length > 0) {
        content.trigger = triggerList;
      }
      this.ruleForm = this.rule;
      this.ruleForm.ruleContent = JSON.stringify(content);
      updateRule(this.ruleForm).then(response => {
        this.$modal.msgSuccess("保存成功");
        this.$router.go(-1);
      });
    },
  }
};
</script>
<style lang="scss">
.title {
  font-weight: 700;
  color: #373d41;
  vertical-align: bottom;
  font-size: 28px;
  line-height: 40px;
  display: inline-block;
}

.middleTitle {
  font-weight: 700;
  color: #373d41;
  vertical-align: bottom;
  font-size: 18px;
  line-height: 40px;
  display: inline-block;
}
</style>
